import React, { useRef, useState } from "react";
import { Button, message, Progress } from "antd";

interface UrlState {
  name: string;
  url: string;
}

const Home: React.FC = () => {
  // 通过 useRef 获取节点， 必须传递泛型
  const input = useRef<HTMLInputElement | null>(null);
  const [urls, setUrls] = useState<UrlState[]>([]);
  // 点击事件
  const handleClick = () => {
    if (input.current) {
      // 点击了 btn === 相当于 点击了 ipt
      input.current.click();
    }
  };

  // 文件选中改变事件
  const handleChange = () => {
    // 必须进行 非空验证
    if (input.current && input.current.files) {
      // 1. 获取选中的文件
      const file = input.current.files[0];
      if (!file.type.includes("image")) {
        message.error("非常遗憾， 只可以上传图片");
        return;
      }
      // 2. 读取文件
      // 2-1 创建FileReader 文件读取类
      const fr = new FileReader();
      // 2-2 读取文件
      fr.readAsDataURL(file);
      // 2-3 监听读取的结果
      fr.addEventListener("load", () => {
        // 结果
        setUrls([...urls, { name: file.name, url: fr.result as string }]);
      });
    }
  };

  return (
    <div>
      <input
        type="file"
        style={{ display: "none" }}
        ref={input}
        onChange={() => handleChange()}
      />
      <Button onClick={() => handleClick()}>上传文件</Button>
      <div>
        {urls.map((v, i) => {
          return (
            <img
              key={i}
              src={v.url}
              alt=""
              width={200}
              height={200}
              style={{ objectFit: "cover", margin: 10 }}
            />
          );
        })}
      </div>
      <div>
        {urls.map((v, i) => {
          return (
            <div style={{ display: "flex" }}>
              <span>{v.name}</span>
              <Progress percent={100} key={i} showInfo />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Home;
